'use client' import { useState, useMemo } from 'react' import { Plus, Trash2, Edit2, Check, Search, SortAsc } from 'lucide-react' import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" interface Todo { id: number text: string completed: boolean } export default function Component() { const [todos, setTodos] = useState([]) const [newTodo, setNewTodo] = useState('') const [editingId, setEditingId] = useState(null) const [editText, setEditText] = useState('') const [searchTerm, setSearchTerm] = useState('') const [sortAlphabetically, setSortAlphabetically] = useState(false) const addTodo = () => { if (newTodo.trim() !== '') { setTodos([...todos, { id: Date.now(), text: newTodo, completed: false }]) setNewTodo('') } } const toggleTodo = (id: number) => { setTodos(todos.map(todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo )) } const removeTodo = (id: number) => { setTodos(todos.filter(todo => todo.id !== id)) } const startEditing = (id: number, text: string) => { setEditingId(id) setEditText(text) } const saveEdit = () => { if (editingId !== null) { setTodos(todos.map(todo => todo.id === editingId ? { ...todo, text: editText } : todo )) setEditingId(null) } } const filteredAndSortedTodos = useMemo(() => { return todos .filter(todo => todo.text.toLowerCase().includes(searchTerm.toLowerCase())) .sort((a, b) => { if (sortAlphabetically) { return a.text.localeCompare(b.text) } return 0 }) }, [todos, searchTerm, sortAlphabetically]) return (

Todo List

setNewTodo(e.target.value)} className="flex-grow mr-2" onKeyPress={(e) => e.key === 'Enter' && addTodo()} />

setSearchTerm(e.target.value)} className="flex-grow mr-2" />

toggleTodo(todo.id)} className="mr-2" /> {editingId === todo.id ? ( setEditText(e.target.value)} className="flex-grow" onKeyPress={(e) => e.key === 'Enter' && saveEdit()} /> ) : ( {todo.text} )}

{editingId === todo.id ? ( ) : ( )}

) }